<template>
    <div id="content" >
        <div class="page-header">
            <div class="container-fluid">
                <div class="pull-right">

                    <a title="添加" href="#/catalog/product/create" class="btn btn-primary" data-original-title="添加">
                        <i class="fa fa-plus"></i>
                    </a>
                    <button title="复制" class="btn btn-default" data-original-title="复制">
                        <i class="fa fa-copy"></i>
                    </button>
                    <button title="删除" class="btn btn-danger"  data-original-title="删除">
                        <i class="fa fa-trash-o"></i>
                    </button>
                </div>
                <h1>商品管理</h1>
                <ul class="breadcrumb">
                    <li><a href="https://mall.opencart.cn/admin/index.php?route=common/dashboard&amp;user_token=b487ec01767579a06ab52befdf8291a4">首页</a></li>
                    <li><a href="https://mall.opencart.cn/admin/index.php?route=catalog/product&amp;user_token=b487ec01767579a06ab52befdf8291a4">商品管理</a></li>
                </ul>
            </div>
        </div>
        <div class="container-fluid">        <div class="row">
            <div id="filter-product" class="col-sm-12 hidden-sm hidden-xs">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-filter"></i> 筛选</h3>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label class="control-label" for="input-name">商品名称</label> <input type="text" name="filter_name" value="" placeholder="商品名称" id="input-name" class="form-control" autocomplete="off"><ul class="dropdown-menu"></ul>
                                </div>
                                <div class="form-group">
                                    <label class="control-label" for="input-model">商品型号</label> <input type="text" name="filter_model" value="" placeholder="商品型号" id="input-model" class="form-control" autocomplete="off"><ul class="dropdown-menu"></ul>
                                </div>
                                <div class="form-group">
                                    <label class="control-label" for="input-sku">SKU</label> <input type="text" name="filter_sku" value="" placeholder="SKU" id="input-sku" class="form-control" autocomplete="off"><ul class="dropdown-menu"></ul>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label class="control-label" for="input-price">销售价格</label> <input type="text" name="filter_price" value="" placeholder="销售价格" id="input-price" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label class="control-label" for="input-quantity">库存数量</label> <input type="text" name="filter_quantity" value="" placeholder="库存数量" id="input-quantity" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label class="control-label" for="input-stock-quantity">库存区间</label> <input type="text" name="filter_stock_quantity" value="" placeholder="10-20" id="input-stock-quantity" class="form-control">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label class="control-label" for="input-status">状态</label> <select name="filter_status" id="input-status" class="form-control">
                                    <option value="">全部</option>
                                    <option value="1">已上架</option>
                                    <option value="0">已下架</option>
                                </select>
                                </div>
                                <div class="form-group">
                                    <label class="control-label" for="input-category">商品分类</label> <select name="filter_category" id="input-category" class="form-control">
                                    <option value="">全部</option>

                                </select>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label class="control-label" for="input-image">主图</label> <select name="filter_image" id="input-image" class="form-control">
                                    <option value="">全部</option>
                                    <option value="1">有主图</option>
                                    <option value="0">无主图</option>
                                </select>
                                </div>
                                <div class="form-group">
                                    <label class="control-label" for="input-show-variant">显示子产品</label> <select name="filter_show_variant" id="input-show-variant" class="form-control">
                                    <option value="1" selected="selected">显示</option>
                                    <option value="0">隐藏</option>
                                </select>
                                </div>
                                <div class="form-group text-right">
                                    <div class="btn-group">
                                        <button disabled="" class="dropdown-toggle btn btn-success" id="batch-edit" type="button" data-toggle="dropdown">批量修改
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu batch-edit-item" role="menu">
                                            <li>
                                                <a href="javascript:void(0)" data-type="price">商品<span>价格</span></a>
                                            </li>
                                            <li>
                                                <a href="javascript:void(0)" data-type="quantity">商品<span>库存</span></a>
                                            </li>
                                            <li>
                                                <a href="javascript:void(0)" data-type="status">商品<span>下架</span></a>
                                            </li>
                                        </ul>
                                    </div>
                                    <button type="button" id="button-filter" class="btn btn-default"><i class="fa fa-filter"></i> 筛选</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-list"></i> 商品列表</h3>
                    </div>
                    <div class="panel-body">

                            <div class="table-responsive">
                                <table class="table table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <td style="width: 1px;" class="text-center">
                                            <input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);" id="all-selected">
                                        </td>
                                        <td class="text-left">
                                            <a href="https://mall.opencart.cn/admin/index.php?route=catalog/product&amp;user_token=b487ec01767579a06ab52befdf8291a4&amp;sort=p.product_id&amp;order=ASC">ID</a> </td>
                                        <td class="text-center">图片</td>
                                        <td class="text-left">
                                            <a href="https://mall.opencart.cn/admin/index.php?route=catalog/product&amp;user_token=b487ec01767579a06ab52befdf8291a4&amp;sort=pd.name&amp;order=ASC">商品名称</a> </td>
                                        <td class="text-left">
                                            <a href="https://mall.opencart.cn/admin/index.php?route=catalog/product&amp;user_token=b487ec01767579a06ab52befdf8291a4&amp;sort=p.model&amp;order=ASC">商品型号</a> </td>
                                        <td class="text-right">
                                            <a href="https://mall.opencart.cn/admin/index.php?route=catalog/product&amp;user_token=b487ec01767579a06ab52befdf8291a4&amp;sort=p.price&amp;order=ASC">价格</a> </td>
                                        <td class="text-right">
                                            <a href="https://mall.opencart.cn/admin/index.php?route=catalog/product&amp;user_token=b487ec01767579a06ab52befdf8291a4&amp;sort=p.quantity&amp;order=ASC">数量</a> </td>
                                        <td class="text-left">
                                            <a href="https://mall.opencart.cn/admin/index.php?route=catalog/product&amp;user_token=b487ec01767579a06ab52befdf8291a4&amp;sort=p.status&amp;order=ASC">状态</a> </td>
                                        <td class="text-right">管理</td>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="item in goods_list">
                                        <td class="text-center selected-item">
                                            <input type="checkbox" name="selected[]" value="29" onchange="isChecked();">
                                        </td>
                                        <td class="text-center">
                                            <span>{{item.id}}</span>
                                        </td>
                                        <td class="text-center">
                                            <img src="https://mall.opencart.cn/image/cache/catalog/demo/product/8-40x40.jpg" alt="Apple iPhone 8s Plus 64G 玫瑰金色全网通4G手机" class="img-thumbnail">
                                        </td>
                                        <td class="text-left name-editor">
                                            <span>{{item.name}}</span>
                                        </td>
                                        <td class="text-left model-editor" data-item="model">
                                            <span>{{item.name}}</span>

                                        </td>
                                        <td class="text-right price-editor" data-item="price">

                                            <span>￥{{item.price}}</span>
                                        </td>
                                        <td class="text-right quantity-editor" data-item="quantity">
                                            <span class="label label-success">0</span>
                                        </td>
                                        <td class="text-left">
                                            <div class="bootstrap-switch-on bootstrap-switch-mini bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-animate"
                                                 style="width: 94px;">
                                                <div class="bootstrap-switch-container"
                                                     v-bind:style="{'margin-left': item.status==1?0:-46 + 'px'}"
                                                     style="width: 138px; " >
                                                    <span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 46px;">已上架</span>
                                                    <span class="bootstrap-switch-label" style="width: 46px;">状态</span>
                                                    <span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 46px;">已下架</span>
                                                    <input type="checkbox" name="product-status-toggle" data-id="29" checked="">
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-right">
                                            <div class="btn-group" style="min-width: 65px;">
                                                <a v-bind:href="'#/catalog/product/edit/'+item.id" data-toggle="tooltip" title="" class="btn btn-primary" data-original-title="编辑">
                                                    <i class="fa fa-pencil"></i>
                                                </a>
                                                <button type="button" data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
                                                    <span class="caret"></span>
                                                </button>
                                                <ul class="dropdown-menu dropdown-menu-right">
                                                    <li>
                                                        <a href="javascript:void(0);" class="btn-variant" data-id="29">
                                                            <i class="fa fa-cog"></i> 编辑子商品
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=29" target="_blank">
                                                            <i class="fa fa-search"></i> 查看
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                        <div class="row">
                            <div class="col-sm-6 text-left"><ul class="pagination"><li class="active"><span>1</span></li><li><a href="https://mall.opencart.cn/admin/index.php?route=catalog/product&amp;user_token=b487ec01767579a06ab52befdf8291a4&amp;page=2">2</a></li><li><a href="https://mall.opencart.cn/admin/index.php?route=catalog/product&amp;user_token=b487ec01767579a06ab52befdf8291a4&amp;page=2">&gt;</a></li><li><a href="https://mall.opencart.cn/admin/index.php?route=catalog/product&amp;user_token=b487ec01767579a06ab52befdf8291a4&amp;page=2">&gt;|</a></li></ul></div>
                            <div class="col-sm-6 text-right">显示 1 - 20 / 合计 28（共 2 页）</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</template>

<script>
    export default {

        data:function(){
            return {
                search:{

                },
                goods_list:[]
            }
        },

        methods:{

            get_list:function(){

                var t = this;

                // var url = this.config.web_url + '/admin.php?r=goods/get_list';
                var url = this.config.web_url + '&r=goods.get_list';
                this.axios.get( url ).then(function( res ){

                    t.goods_list = res.data
                });

            }

        },

        created:function(){

            this.get_list();
        }
    }
</script>
